<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from "axios";
const router = useRouter()
const phone = ref('')
const verifyCode = ref('')
// let Token = "";
var Token = "";
const isAgreed = ref(true)
const localhost = "http://localhost:8511/users/"
const goBack = () => {
  router.back()
}
// 创建一个 Axios 实例
const apiClient = axios.create({
  baseURL: 'https://localhost:8511/', // 替换为你的后端 API 地址
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});
apiClient.interceptors.request.use(
    config => {
      // 在这里添加你需要携带的数据到请求头
      config.headers['Token'] = Token;
      return config;
    },
    error => {
      return Promise.reject(error);
    }
);
// 登录方法：{
const handleLogin = () => {
  // 判断电话号码是否正确

  if (!isAgreed.value) {
    // 显示协议提示
    return
  }
  // 处理登录逻辑
  loginUser()
  router.push('/')
}


// }
// 测试登录
const loginUser =  () => {
  // 对电话号码进行判断是否是11位手机号码或者是不是纯数字
  if (phone.value.length === 11 && /^\d+$/.test(phone.value)) {
    // 验证通过，可以进行下一步操作
    ElMessage.success('手机号码格式正确')
    axios.post(localhost + `loginUser?phone=`+phone.value+`&code=`+verifyCode.value).then(res=>{
      console.log(res.data.data)
      Token = res.data.data;
      sessionStorage.setItem("phone", res.data.data);
      localStorage.setItem('phone', res.data.data);
      if (res.data.code === 200){
        router.push('/')
      }
    })
    return true;
  } else {
    // 验证失败，提示错误信息
    ElMessage.error('手机号码格式不正确')
    return false;
  }
}
// 获得验证码的函数
const getVerifyCode = () => {
  axios.get(localhost + `getVerifyCode?phone=`+phone.value).then(res=>{
    return true;
  })
  // 获取验证码逻辑
}
const look = () => {
  let encodedApp = encodeURIComponent("1234");
  apiClient.post(localhost + `look?app=${encodedApp}`).then(res=>{
    console.log(res)
  })
  // console.log(Token)
  // 获取验证码逻辑
}
// 判断电话号码是否正确
const maskPhoneNumber = () =>{

}
// 页面加载时就使用的函数
onMounted(() => {

})
</script>

<template>
  <div class="login-page">
    <div class="header">
      <div class="close-btn" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
        </svg>
      </div>
    </div>

    <div class="content">
      <div class="logo">
        <img src="/images/logo.png" alt="Chat GPT">
      </div>
      <h1 class="app-name">Chat GPT</h1>

      <div class="form" >
        <div class="input-group">
          <input 
            type="tel" 
            v-model="phone"
            placeholder="手机号码"
            maxlength="11"
          >
        </div>
        <div class="input-group verify-code">
          <input 
            type="text" 
            v-model="verifyCode"
            placeholder="验证码"
            maxlength="6"
          >
          <button class="get-code-btn" @click="getVerifyCode">
            重新获取
          </button>
        </div>

        <div class="agreement">
          <label class="checkbox">
            <input 
              type="checkbox" 
              v-model="isAgreed"
            >
            <span>新用户将自动注册ChatGPTAPP，并同意</span>
          </label>
          <a href="/agreement" class="link">《ChatGPT用户协议》</a>
        </div>
        <button 
          class="login-btn"
          :class="{ disabled: !phone || !verifyCode || !isAgreed }"
          @click="look"
        >
          登录
        </button>
        <button
            class="login-btn"
            @click="loginUser"
        >
          测试
        </button>
      </div>
    </div>

    <div class="footer">
      <div class="slogan">Slogan: AI改变世界</div>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  min-height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

.header {
  padding: 16px;
}

.close-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
}

.logo {
  width: 80px;
  height: 80px;
  background: #007AFF;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.logo img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.app-name {
  font-size: 24px;
  font-weight: 600;
  color: #007AFF;
  margin: 0 0 48px;
}

.form {
  width: 100%;
}

.input-group {
  margin-bottom: 16px;
}

input {
  width: 100%;
  height: 48px;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  font-size: 16px;
  padding: 0;
}

input:focus {
  outline: none;
  border-bottom-color: #007AFF;
}

.verify-code {
  display: flex;
  gap: 12px;
}

.verify-code input {
  flex: 1;
}

.get-code-btn {
  border: none;
  background: none;
  color: #007AFF;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.agreement {
  margin: 24px 0;
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.link {
  color: #007AFF;
  text-decoration: none;
}

.login-btn {
  width: 100%;
  height: 44px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  cursor: pointer;
}

.login-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.footer {
  padding: 24px;
  text-align: center;
}

.slogan {
  color: #999;
  font-size: 14px;
}
</style> 